<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="pragma" content="Pragma">
    <meta http-equiv="cache-control" content="public">

    <link rel="stylesheet" href="css/idangerous.swiper.css?v=130">
    <link rel="stylesheet" href="css/animation.css?v=270">
    <link rel="stylesheet" href="css/main.css?v=228">
    <link rel="stylesheet" href="css/my.css"/>
    <title>这是啥呢</title>
    <script type="text/javascript">
        if (window.screen.height <= 500) {
            document.write('<meta name="viewport" content="initial-scale=0.43,maximum-scale=0.43,minimum-scale=0.43" />');
        } else {
            var phoneWidth = parseInt(window.screen.width);
            var phoneScale = phoneWidth / 640;

            var ua = navigator.userAgent;
            if (/Android (\d+\.\d+)/.test(ua)) {
                var version = parseFloat(RegExp.$1);
                // andriod 2.3
                if (version > 2.3) {
                    document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
                    // andriod 2.3
                } else {
                    document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
                }
            } else {
                document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
            }
        }
    </script>
</head>
<body class="s-bg">
<img style="opacity:0;position:absolute;z-index:-100;" src="images/share1.jpg"/>
<section class="arrow-up">
    <p class="css_sprite01"></p>
</section>

<section class="u-audio" data-src="media/iwantyou.mp3">
    <p id="coffee_flow" class="btn_audio">
        <strong class="txt_audio z-hide">关闭</strong>
        <span class="music-icon css_sprite01 audio_open"></span>
    </p>
</section>
<!-- loading start-->
<div class="sloading"
     style="height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 99999;background: rgb(37,37,37);">
    <img src="images/loading.gif" class="limg" width="100%"/>
</div>
<!-- loading end -->

<div class="swiper-container swiper-main">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-1  main-swiper fenye" style="background-position: center center">
            <div class="heart " animationType="a-flash"><img src="images/my/heart.png" width="40%"></div>
            <div class="title-name" animationType="a-flyL2-1">
                <div class="title-name-one title-text">Hey，长得好看的</div>
                <div class="title-border"></div>
                <div class="title-name-two title-text">快点看<span style="font-size: 50px;"> 这 </span>里了</div>
            </div>
        </div>
        <div class="swiper-slide slide-2 main-swiper" style="background-position: center center">
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 100px; left: 20px; top: 30px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 50px; left: 120px; bottom: 330px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-3"
                 style="position:absolute; opacity: 0.25;height: 80px; left: 60%; top: 130px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 30px; right: 20px; top: 270px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 60px; top: 100px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 80px; top: 400px;"/>
            <img src="images/my/wind.gif" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.15;height: 80px; left: 10%; top: 400px;"/>
            <img src="images/my/sun.png" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.75;height: 50px; left: 20%; top: 200px;"/>

            <div class="times-line">
                <div class="line-title">
                    <div class="line-title-big animation opacity0" animationType="a-flyL2-1">毕</div>
                    <div class="line-title-else animation opacity0" animationType="a-flyL2-1">业</div>
                </div>
                <div class="line-line  animation opacity0" animationType="a-flyR2-2"></div>
                <div class="line-content">
                    <div class="line-content-one  animation opacity0" animationType="a-flyR2-1">●2010年06月18日</div>
                    <div class="line-content-two  animation opacity0" animationType="a-flyL2-2">
                        离开那天，想着与你有关的是不是只有这张照片了。
                    </div>
                    <div class="line-content-img animation opacity0" animationType="a-flyL2-3"><img
                            src="images/my/1.jpg" alt="" width="96%"/></div>
                </div>
            </div>
            <div class="trees">
                <div class="animation opacity0" animationType="a-flyL2-1">
                    <div class="tree1 tree1-p2"></div>
                    <div class="tree2 tree2-p2"></div>
                </div>
                <div class="animation opacity0" animationType="a-flyR2-1">
                    <div class="tree3 tree3-p2"></div>
                    <div class="tree4 tree4-p2"></div>
                </div>
                <div class="hill1 hill1-p2 animation opacity0" animationType="a-flyL2-2"></div>
                <div class="hill2 hill2-p2 animation opacity0" animationType="a-flyR2-2"></div>
                <div class="hill3 hill3-p2 animation opacity0" animationType="a-flyL2-3"></div>
            </div>
        </div>
        <div class="swiper-slide slide-2 main-swiper" style="background-position: center center">
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 100px; left: 20px; top: 30px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 50px; left: 120px; bottom: 330px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-3"
                 style="position:absolute; opacity: 0.25;height: 80px; left: 60%; top: 130px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 30px; right: 20px; top: 270px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 60px; top: 100px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 80px; top: 400px;"/>
            <img src="images/my/wind.gif" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.15;height: 80px; left: 10%; top: 400px;"/>
            <img src="images/my/sun.png" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.75;height: 50px; left: 20%; top: 200px;"/>

            <div class="times-line">
                <div class="line-title">
                    <div class="line-title-big animation opacity0" animationType="a-flyL2-1">相</div>
                    <div class="line-title-else animation opacity0" animationType="a-flyL2-1">爱</div>
                </div>
                <div class="line-line  animation opacity0" animationType="a-flyR2-2"></div>
                <div class="line-content">
                    <div class="line-content-one  animation opacity0" animationType="a-flyR2-1">● 2014年08月18日</div>
                    <div class="line-content-two  animation opacity0" animationType="a-flyL2-2"> 听说坐了摩天轮的情侣永远不会分开,
                        哈哈，验证一下。
                    </div>
                    <div class="line-content-img animation opacity0" animationType="a-flyL2-3"><img
                            src="images/my/lover.jpg" alt="" width="96%"/></div>
                </div>
            </div>
            <div class="trees">
                <div class="animation opacity0" animationType="a-flyL2-1">
                    <div class="tree1 tree1-p2"></div>
                    <div class="tree2 tree2-p2"></div>
                </div>
                <div class="animation opacity0" animationType="a-flyR2-1">
                    <div class="tree3 tree3-p2"></div>
                    <div class="tree4 tree4-p2"></div>
                </div>
                <div class="hill1 hill1-p2 animation opacity0" animationType="a-flyL2-2"></div>
                <div class="hill2 hill2-p2 animation opacity0" animationType="a-flyR2-2"></div>
                <div class="hill3 hill3-p2 animation opacity0" animationType="a-flyL2-3"></div>
            </div>
        </div>


        <div class="swiper-slide slide-2 main-swiper" style="background-position: center center">
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 100px; left: 20px; top: 30px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 50px; left: 120px; bottom: 330px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-3"
                 style="position:absolute; opacity: 0.25;height: 80px; left: 60%; top: 130px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 30px; right: 20px; top: 270px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 60px; top: 100px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 80px; top: 400px;"/>
            <img src="images/my/wind.gif" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.15;height: 80px; left: 10%; top: 400px;"/>
            <img src="images/my/sun.png" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.75;height: 50px; left: 20%; top: 200px;"/>

            <div class="times-line">
                <div class="line-title">
                    <div class="line-title-big animation opacity0" animationType="a-flyL2-1">相</div>
                    <div class="line-title-else animation opacity0" animationType="a-flyL2-1">爱</div>
                </div>
                <div class="line-line  animation opacity0" animationType="a-flyR2-2"></div>
                <div class="line-content">
                    <div class="line-content-one  animation opacity0" animationType="a-flyR2-1">● 2015年02月05日</div>
                    <div class="line-content-two  animation opacity0" animationType="a-flyL2-2"> 
                    第一次挽着你的手臂，第一次你牵了我的小手。
                    </div>
                    <div class="line-content-img animation opacity0" animationType="a-flyL2-3"><img
                            src="images/my/lover.jpg" alt="" width="96%"/></div>
                </div>
            </div>
            <div class="trees">
                <div class="animation opacity0" animationType="a-flyL2-1">
                    <div class="tree1 tree1-p2"></div>
                    <div class="tree2 tree2-p2"></div>
                </div>
                <div class="animation opacity0" animationType="a-flyR2-1">
                    <div class="tree3 tree3-p2"></div>
                    <div class="tree4 tree4-p2"></div>
                </div>
                <div class="hill1 hill1-p2 animation opacity0" animationType="a-flyL2-2"></div>
                <div class="hill2 hill2-p2 animation opacity0" animationType="a-flyR2-2"></div>
                <div class="hill3 hill3-p2 animation opacity0" animationType="a-flyL2-3"></div>
            </div>
        </div>


        <div class="swiper-slide slide-2 main-swiper" style="background-position: center center">
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 100px; left: 20px; top: 30px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 50px; left: 120px; bottom: 330px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-3"
                 style="position:absolute; opacity: 0.25;height: 80px; left: 60%; top: 130px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 30px; right: 20px; top: 270px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 60px; top: 100px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 80px; top: 400px;"/>
            <img src="images/my/wind.gif" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.15;height: 80px; left: 10%; top: 400px;"/>
            <img src="images/my/sun.png" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.75;height: 50px; left: 20%; top: 200px;"/>

            <div class="times-line">
                <div class="line-title">
                    <div class="line-title-big animation opacity0" animationType="a-flyL2-1">相</div>
                    <div class="line-title-else animation opacity0" animationType="a-flyL2-1">爱</div>
                </div>
                <div class="line-line  animation opacity0" animationType="a-flyR2-2"></div>
                <div class="line-content">
                    <div class="line-content-one  animation opacity0" animationType="a-flyR2-1">● 2015年02月22日</div>
                    <div class="line-content-two  animation opacity0" animationType="a-flyL2-2"> 第一次背小仙女。第一次吻你的脸颊。（好羞涩(︶.̮︶），某人还说这不算吻<_<）
                    </div>
                    <div class="line-content-img animation opacity0" animationType="a-flyL2-3"><img
                            src="images/my/lover.jpg" alt="" width="96%"/></div>
                </div>
            </div>
            <div class="trees">
                <div class="animation opacity0" animationType="a-flyL2-1">
                    <div class="tree1 tree1-p2"></div>
                    <div class="tree2 tree2-p2"></div>
                </div>
                <div class="animation opacity0" animationType="a-flyR2-1">
                    <div class="tree3 tree3-p2"></div>
                    <div class="tree4 tree4-p2"></div>
                </div>
                <div class="hill1 hill1-p2 animation opacity0" animationType="a-flyL2-2"></div>
                <div class="hill2 hill2-p2 animation opacity0" animationType="a-flyR2-2"></div>
                <div class="hill3 hill3-p2 animation opacity0" animationType="a-flyL2-3"></div>
            </div>
        </div>

         <div class="swiper-slide slide-2 main-swiper" style="background-position: center center">
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 100px; left: 20px; top: 30px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-1"
                 style="position:absolute; opacity: 0.25;height: 50px; left: 120px; bottom: 330px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-3"
                 style="position:absolute; opacity: 0.25;height: 80px; left: 60%; top: 130px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 30px; right: 20px; top: 270px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 60px; top: 100px;"/>
            <img src="images/my/circle.gif" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.25;height: 80px; right: 80px; top: 400px;"/>
            <img src="images/my/wind.gif" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.15;height: 80px; left: 10%; top: 400px;"/>
            <img src="images/my/sun.png" class="" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.75;height: 50px; left: 20%; top: 200px;"/>

            <div class="times-line">
                <div class="line-title">
                    <div class="line-title-big animation opacity0" animationType="a-flyL2-1">First</div>
                    <div class="line-title-else animation opacity0" animationType="a-flyL2-1">Kiss</div>
                </div>
                <div class="line-line  animation opacity0" animationType="a-flyR2-2"></div>
                <div class="line-content">
                    <div class="line-content-one  animation opacity0" animationType="a-flyR2-1">● 2015年02月27日</div>
                    <div class="line-content-two  animation opacity0" animationType="a-flyL2-2"> 我的初吻没了，你还说不知道，大坏蛋╭(╯^╰)╮。
                    </div>
                    <div class="line-content-img animation opacity0" animationType="a-flyL2-3"><img
                            src="images/my/lover.jpg" alt="" width="96%"/></div>
                </div>
            </div>
            <div class="trees">
                <div class="animation opacity0" animationType="a-flyL2-1">
                    <div class="tree1 tree1-p2"></div>
                    <div class="tree2 tree2-p2"></div>
                </div>
                <div class="animation opacity0" animationType="a-flyR2-1">
                    <div class="tree3 tree3-p2"></div>
                    <div class="tree4 tree4-p2"></div>
                </div>
                <div class="hill1 hill1-p2 animation opacity0" animationType="a-flyL2-2"></div>
                <div class="hill2 hill2-p2 animation opacity0" animationType="a-flyR2-2"></div>
                <div class="hill3 hill3-p2 animation opacity0" animationType="a-flyL2-3"></div>
            </div>
        </div>


        <div class="swiper-slide slide-3 main-swiper" style="background-position: center center">
            <div class="page-back">
                <div class="page-back-div">
                    <div class="animation opacity0" animationType="a-fadein31">在我的脑海里</div>
                    <div class="animation opacity0" animationType="a-fadein31">In my mind,</div>
                </div>

                <div class="page-back-div animation opacity0" animationType="a-fadein32">
                    <div><span style="font-size: 40px;">“你”</span>的身影挥散不去</div>
                    <div>The form of "you" will be scattered don't go</div>
                </div>
                <div class="page-back-div animation opacity0" animationType="a-fadein33">
                    <img src="images/my/3.jpg" alt="" width="80%"/>
                </div>
            </div>
            <div class="page-title">
                <div class="page-title-one  ">
                    <img src="images/my/black.gif" class="animation opacity0" animationType="a-fadein33">
                    <span class="animation opacity0" animationType="a-fadeinL31">
                        Cardiac
                    </span>

                </div>
                <div class="page-border animation opacity0" animationType="a-length"></div>
                <div class="page-title-two " >
                    <span class="animation opacity0" animationType="a-fadeinR31">
                        心动
                    </span>
                    <img src="images/my/black.gif" class="animation opacity0" animationType="a-fadein33">
                </div>
            </div>
        </div>
        <div class="swiper-slide slide-4 main-swiper" style="background-position: center center">
            <div class="back-title">
                <span class="back-title-big animation opacity0" animationType="a-rotateinRT1" >
                    哈哈,
                </span>
                <span style="color:red;" class="back-title-else animation opacity0" animationType="a-rotateinRT1">
                    第一张合照
                </span>
            </div>
            <img src="images/my/cloud.png" class="animation opacity0" alt="" animationType="a-fadein31"
                 style="position:absolute;height: 120px; right: 10%; top: 50px;"/>

            <div>
                <img src="images/my/2.jpg" alt="" class="animation opacity0" alt="" animationType="a-zoom"/>
            </div>
        </div>
        <div class="swiper-slide slide-5 main-swiper" style="background-position: center center">
            <div class="back-title">
                <span class="back-title-big animation opacity0" alt="" animationType="a-flipinXmy">
                    我说
                </span>
                <span class="back-title-else animation opacity0" alt="" animationType="a-flipinXmy2">
                    --你这个没良心的
                </span>
            </div>
            <img src="images/my/snow.png" class="animation opacity0" alt="" animationType="a-flyL2-2"
                 style="position:absolute; opacity: 0.95;height: 120px; right: 10%; top: 50px;"/>

            <div>
                <img src="images/my/yaoshi.jpg" alt="" width="20%" class="animation opacity0" alt="" animationType="a-zoom"/>
                <img src="images/my/yaoshi2.jpg" alt="" width="20%" class="animation opacity0" alt="" animationType="a-zoom"/>
            </div>
            <div class="page-title">
                <div class="page-title-one animation opacity0" style="font-size: 36px"  animationType="a-fadeinL31">
                    给你的东西，
                </div>
                <div class="title-border  animation opacity0" animationType="a-length"></div>
                <div class="page-title-two animation opacity0" style="font-size: 28px" animationType="a-fadeinR31">
                    是不是全没了╭(╯^╰)╮
                </div>
            </div>
        </div>
        <div class="swiper-slide slide-6 main-swiper" style="background-position: center center">
            <div class="code-page-div" style="text-align: center">
                <img src="images/my/on2.jpg" alt="" width="100%" class="wechat" style="margin-top: 20%"/>
            </div>
            <div class="code-page-div" style="text-align: left">
                <div class="code-eng animation opacity0" animationType="a-flyLmy">
                    <div >Me.main(void){</div>
                    <div style="padding-left: 10px;">while(1){</div>
                    <div style="padding-left: 20px;">Happiness(You);}}</div>
                </div>
            <div class="code-chinese animation opacity0" animationType="a-flyRmy" style="text-align: right">
                <div>我希望</div>
                <div>你能够</div>
                <div>一直开心下去</div>
            </div>
            </div>
        </div>
        <div class="swiper-slide slide-7 main-swiper endpage" style="background-position: center center">
            <div class="last-page-img">
                <img src="images/my/both.jpg" alt="" width="50%" class="animation opacity0" animationType="a-fadein31"/>
            </div>
            <div class="last-page-title animation opacity0" animationType="a-fadein32">
                <div class="last-page-title-content" >未来的路</div>
                <div class="last-page-line"></div>
                <div class="last-page-title-two">一起谱写</div>
                <div style="clear: both"></div>
            </div>
            <div class="last-page-item">
                <div class=" animation opacity0" animationType="a-fadein33">未完待续......</div>
            </div>
            <div class="last-page-cop animation opacity0" animationType="a-fadein37" >From YJ【偶尔文艺的程序媛】</div>
        </div>

    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/zepto.min.js?v=1"></script>
<script src="js/idangerous.swiper.js"></script>
<script src="js/my.js"></script>


</body>
</html>  